<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body, .container {
            width: 100%;
            height: 100%;
            min-height: 600px;
        }

        .searchPanel {
            width: 48px;
            height: 48px;
            background: #f0f0f9;
            transition: all .2s;
            overflow: hidden;
        }

        .searchPanel:hover {
            width: 200px;
            transition: all .2s;
        }

        .icon {
            width: 48px;
            height: 48px;
            float: left;
            background: #ff4400;
            line-height: 48px;
        }

        .searchInput {
            /*float: left;*/
            background: #f0a;
            width: 0px;
            height: 48px;
            text-align: center;
            line-height: 48px;
            transition: all .2s;
        }

        .searchPanel:hover .searchInput {
            display: block;
            width: 200px;
        }

    </style>
</head>
<body>
<div class="container" style="position: relative;">

    <div style="position: absolute; text-align: center; bottom: 20px;">Copyright</div>

    <div class="searchPanel">
        <div class="icon">Hover</div>
        <div class="searchInput">ABCDE</div>
    </div>
</div>


</body>
</html>